import React, { Component } from 'react'
import { Text, View, StyleSheet, SafeAreaView, SectionList, TouchableOpacity } from 'react-native'

const DATA = [
  {
    title: "核心组件",
    data: [
      {
        title: "Alert && Button",
        target: "AlertDemo",
      }, 
      {
        title: "StatusBar && Switch",
        target: "StatusBarDemo",
      },
      {
        title: "ActivityIndicator",
        target: "ActivityIndicatorDemo",
      }, 
      {
        title: "Image",
        target: "ImageDemo",
      }, 
      {
        title: "Touchable",
        target: "TouchableDemo",
      }, 
      {
        title: "TextInput",
        target: "TextInputDemo",
      }, 
      {
        title: "ScrollView",
        target: "ScrollViewDemo",
      }, 
      {
        title: "Model",
        target: "ModelDemo",
      }, 
      {
        title: "SectionList",
        target: "SectionListDemo",
      }, 
      {
        title: "FlatList",
        target: "FlatListDemo",
      }, 
      {
        title: "Animated",
        target: "AnimatedDemo",
      }, 
    ]
  },
  {
    title: "第三方组件",
    data: [
      {
        title: "WebView",
        target: "WebViewDemo",
        bgColor: "#dab"
      }, 
      {
        title: "Picker",
        target: "PickerDemo",
        bgColor: "#dab"
      }, 
      {
        title: "Swiper",
        target: "SwiperDemo",
        bgColor: "#dab"
      }, 
      {
        title: "LinearGradient",
        target: "LinearGradientDemo",
        bgColor: "#dab"
      }, 
    ]
  },
  {
    title: "自定义组件",
    data: [
      {
        title: "Loading",
        target: "Loading",
        bgColor: "#fdb"
      }, 
      {
        title: "LoadingMore",
        target: "LoadingMore",
        bgColor: "#fdb"
      }, 
    ]
  },
];

export class index extends Component {
  constructor(props) {
    super(props)
  }

  renderItem = ({title, target, bgColor = '#dfb'}) => {
    const { navigate } = this.props.navigation;

    return (
      <TouchableOpacity
        onPress={() => navigate(target)}
        style={{marginVertical: 5}}
      >
        <View style={{backgroundColor: bgColor, height: 40}}>
          <Text style={{padding: 10, fontSize: 16}}>{title}</Text>
        </View>
      </TouchableOpacity>
    );
  }

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <SectionList
          sections={DATA}
          keyExtractor={(item, index) => item.target + index}
          renderItem={({ item }) => this.renderItem(item)}
          renderSectionHeader={({ section: { title } }) => (
            <Text style={styles.header}>{title}</Text>
          )}
        />
      </SafeAreaView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 10,
    marginHorizontal: 16
  },
  item: {
    backgroundColor: "#f9c2ff",
    padding: 20,
    marginVertical: 8
  },
  header: {
    fontSize: 32,
    backgroundColor: "#fff"
  },
  title: {
    fontSize: 24
  }
});

export default index
